<template>
<div class="account">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="职位收藏" name="first">
            <div class="tab-content">
                <dl>
                    <dt>
                        <span></span>
                        <span>职位名称</span>
                        <span>公司名称</span>
                        <span>工作地点</span>
                        <span>薪资待遇</span>
                        <span>收藏时间</span>
                    </dt>
                    <dd v-for="(item , index) in list" :key="index">
                        <span> <input type="checkbox" v-model="checkModel" :value="item.id"> </span>
                        <span>{{item.jobTitle}}</span>
                        <span>{{item.companyName}}</span>
                        <span>{{item.workAreaDesc}}</span>
                        <span>{{item.salaryStart||0}}K - {{item.salaryEnd||0}}K/月</span>
                        <span>{{parseTime(new Date(item.collectionTime) , '{y}-{m}-{d}')}}</span>
                    </dd>

                    <dd v-if="list.length == 0" class="no-data">
                        <span>暂无数据</span>
                    </dd>
                </dl>

                <div class="tool" v-if="list.length>0">
                    <label for="checkbox">
                        <input type="checkbox" @click="checkAll" id="checkbox" v-model="checked">全选
                    </label>
                    <button @click="addBatchPositionApplied">批量投递</button>
                    <button @click="del">删除</button>
                </div>

                <el-pagination
                    v-if="list.length>0"
                    background
                    prev-text="上一页"
                    next-text="下一页"
                    layout="prev, pager, next"
                    @current-change="curPage"
                    :page-size="page.count"
                    :total="page.total">
                </el-pagination>
            </div>
        </el-tab-pane>
        <el-tab-pane label="关注的企业" name="second">
            <div class="tab-content">
                <ul>
                    <li v-for="(item , index) in list2" :key="index">
                        <div class="icon"><img src="../../assets/image/demo1.png" alt=""></div>
                        <div class="office">
                            <div class="title">{{item.companyName}}</div>
                            <div class="salary">{{item.companyScale}}</div>
<!--                            <div class="depict"><router-link :to="`/enterprise/home/${item.id}`">查看该公司招聘职位</router-link></div>-->
                        </div>
                        <i class="icon-del" @click="del(item.id)"></i>
                    </li>
                </ul>

                <el-pagination
                    v-if="list2.length>0"
                    background
                    prev-text="上一页"
                    next-text="下一页"
                    layout="prev, pager, next"
                    @current-change="curPage"
                    :page-size="page.count"
                    :total="page.total">
                </el-pagination>

            </div>
        </el-tab-pane>
    </el-tabs>

</div>
</template>


<script>
import { collectionposition, CompanyAttentionHide, collectionposition_del } from '@/api/me/account'
import {addBatchPositionApplied} from '@/api/jobs'
import moment from 'moment'
export default {
    name: "userInfo",
    data() {
        return {
            activeName: 'first',
            tabIndex: 0,
            list:[],
            list2:[],
            checked:false, //是否全选
            checkModel:[], //双向数据绑定的数组，我是用的id
            page:{},
            req: {
               	accountId: this.$store.getters.accountid,
                limit: 9,
                page: 1
            },
        };
    },
    watch:{
        checkModel(){
    　　　　if(this.checkModel.length==this.list.length){
    　　　　　　this.checked=true;
    　　　　}else{
    　　　　　　this.checked=false;
    　　　　}
    　　},
        req:{
            handler(newVal, oldVal) {
                this.init(this.tabIndex);
            },
            immediate: true,
            deep: true
        },
    },
    created(){
        this.$emit('navIndex', 4);
    },
    methods:{
        curPage(e){
            this.req.page = e;
        },
        handleClick(tab, event) {
            this.tabIndex = tab.idnex;
            // this.req.page = 1;
            this.init(tab.index);
        },
        checkAll(){
    　　　　if(this.checked){
    　　　　　　this.checkModel=[];
    　　　　}else{
    　　　　　　this.list.forEach((item)=>{
        　　　　　　if(this.checkModel.indexOf(item.id)==-1){
        　　　　　　　　this.checkModel.push(item.id)
        　　　　　　}
    　　　　　　})
    　　　　}
    　　},
        init(type){
            if(type == 0){
                collectionposition(this.req).then(res => {
                    if(res.count > 0){
                        this.list = res.data;

                        //分页部分
                        this.page.crr_page = this.req.page;
                        this.page.pages = res.pages; // 总页码
                        this.page.count = res.count; //每页显示
                        this.page.total = res.total; //总条数
                        this.page.hasPrevious = res.hasPrevious; //是否有上一页
                        this.page.hasNext = res.hasNext; //是否有下一页
                    }
                }).catch(err => {
                    console.log(err)
                })
            }else{
                CompanyAttentionHide(this.req).then(res => {
                    if(res.count > 0){
                        this.list2 = res.data;

                        //分页部分
                        this.page.crr_page = this.req.page;
                        this.page.pages = res.pages; // 总页码
                        this.page.count = res.count; //每页显示
                        this.page.total = res.total; //总条数
                        this.page.hasPrevious = res.hasPrevious; //是否有上一页
                        this.page.hasNext = res.hasNext; //是否有下一页
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        },

        addBatchPositionApplied(){
            let data = {};
            data.positionAppliedInfos = [];

            let accountid = this.$store.getters.accountid
            if(this.checkModel.length > 0){
                for (let i = 0; i < this.checkModel.length; i++) {
                    let map = {
                        "positionId": this.checkModel[i],
                        "resumeSource": "",
                        "statusTag": ""
                    };
                    data.positionAppliedInfos.push(map)
                }
                addBatchPositionApplied(data).then(res =>{
                    if(res.resp_code == 0){
                        this.msgSuccess(res.resp_msg)
                    }
                }).catch(err => {
                    this.loading = false
                    this.msgWarn(err)
                })
            }else{
                this.msgWarn("请先选择要投递的工作")
            }

        },

        del(id){
            collectionposition_del(this.checkModel).then(res => {
                if(res.resp_code == 0){
                    this.msgSuccess(res.resp_msg);
                    this.init(this.tabIndex);
                }else{
                    this.msgError(res.resp_msg);
                }
                this.init(this.tabIndex);
            }).catch(err => {
                console.log(err)
            })
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.account{
    float: right;
    width: 970px;
    height: 840px;
    padding: 30px 35px;
    background-color: #fff;
    color: #787878;
    position: relative;
}

>>>.el-tabs__nav{
    height: 40px;
}
>>>.el-tabs__item {
    height: 28px;
    font-size: 16px;
    font-weight: 400;
    color: #787878;
    padding: 0 12px;
}
>>>.el-tabs__item.is-active{
    color: #3EABC4;
}
>>>.el-tabs__nav-wrap::after{
    height: 1px;
}
>>>.el-tabs__active-bar{
    background-color: #3EACC4;
}
.tab-content{
    height: 700px;
    margin-top: 20px;
    font-size: 14px;
    color: #787878;
    dl{
        dt{
            width: 900px;
            height: 50px;
            line-height: 50px;
            background: #F7F7F7;
        }

        dd{
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #E8E8E8;
            overflow: hidden;
            span{
                display: block;
                float: left;
                &:nth-child(1){
                    width: 22px;
                    height: 22px;
                    margin-right: 5px;
                    margin-top: 6px;
                }
            }
        }

        dt, dd{
            span{
                display: block;
                float: left;
                &:nth-child(1){
                    width: 22px;
                    height: 22px;
                    margin-right: 5px;
                }
                &:nth-child(2){
                    width: 170px;
                }
                &:nth-child(3){
                    width: 280px;
                }
                &:nth-child(4){
                    width: 150px;
                }
                &:nth-child(5){
                    width: 150px;
                }
                &:nth-child(6){
                    text-align: center;
                    width: 120px;
                }
            }
            &.no-data{
                span{
                    width: 100% !important;
                    height: 50px;
                    text-align: center;
                }
            }
        }
    }

    ul{
        margin-top: 25px;
        overflow: hidden;
        li{
            position: relative;
            width: 440px;
            height: 130px;
            border: 1px solid #E8E8E8;
            border-radius: 4px;
            overflow: hidden;
            float: left;
            margin-top: 5px;
            margin-bottom: 20px;
            .icon{
                margin: 28px 22px;
                width: 74px;
                height: 74px;
                background: #FFFFFF;
                // border: 1px solid #E8E8E8;
                float: left;
                margin-right: 15px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .office{
                float: left;
                margin-top: 22px;
                .title{
                    color: #121212;
                    font-size: 16px;
                    line-height: 40px;
                }
                .salary{
                    color: #787878;
                    margin-bottom: 7px;
                }
                .depict{
                    font-size: 14px;
                    font-weight: 400;
                    color: #3EABC4;
                }
            }

            &:nth-child(2n){
                float: right;
            }

            &:hover{

                background: #FFFFFF;
                border: 1px solid #E8E8E8;
                box-shadow: 1px 4px 13px 0px #E6E6E6;
                border-radius: 2px;
                i{
                    display: block;
                }
            }

            i{
                cursor: pointer;
                display: none;
                position: absolute;
                top: 15px;
                right: 15px;
                width: 10px;
                height: 10px;
                background: url(../../assets/image/icon-del.png) no-repeat;
            }
        }
    }

    .tool{
        margin-top: 45px;
        label{
            font-weight: 400;
            margin-right: 10px;
        }
        input{
            margin-bottom: -6px;
            margin-right: 5px;
        }
        button{
            width: 88px;
            height: 32px;
            background: #3EACC4;
            border-radius: 4px;
            outline: none;
            border: 0;
            color: #fff;
            margin-left: 10px;
            cursor: pointer;
            &:last-child{
                width: 88px;
                height: 32px;
                background: #E8F4F6;
                border: 1px solid #3EACC4;
                border-radius: 4px;
                color: #3EABC4;
            }
        }
    }

    >>>.el-pagination{
        margin-top: 50px;
        margin-bottom: 80px;
        text-align: center;

        button{
            cursor: pointer;
            outline: none;
            width: 70px;
            height: 30px;
            background: #FFFFFF;
            border: 1px solid #EBEBEB;
            border-radius: 4px;
            font-size: 14px;
            color: #777777;
            margin-left: 5px;
            margin-right: 5px;
            font-weight: 400;
            &:disabled{
                color: #BBBBBB;
            }
        }

        .el-pager{
            .number{
                background: #FFFFFF;
                border: 1px solid #EBEBEB;
                font-weight: normal;
                width: 30px;
                height: 30px;
                color: #777777;
                &.active{
                    background: #3DABC4;
                    border-radius: 4px;
                    color: white;
                }
            }
        }

    }
    .pages{
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translate(-50%);
        button{
            outline: none;
            border: 0;
        }
        .prev,.next{
            width: 70px;
            height: 30px;
            background: #FFFFFF;
            border: 1px solid #EBEBEB;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 400;
            color: #BCBCBC;
            cursor: pointer;
        }
        .page{
            button{
                font-size: 14px;
                width: 30px;
                height: 30px;
                background: #3EACC4;
                border-radius: 4px;
                color: #FFFFFF;
                margin-left: 10px;
                margin-right: 10px;
            }
        }
    }
}
</style>
